<template>
	<view class="container">
		<popup-layer  ref="popupRef" :direction="'top'">
			<van-tabs active="废铁废铜">
			  <van-tab title="废铁废铜">
				  <van-checkbox-group :value="type" @change="chooseType">
				    <van-checkbox name="a">种类1</van-checkbox>
				    <van-checkbox name="b">种类2</van-checkbox>
				    <van-checkbox name="v">种类3</van-checkbox>
				  </van-checkbox-group>
				  
					<van-field label="预计重量(KG)" :value="100" placeholder="输入重量"/>
					<van-field label="期望价格(元)" :value="100" placeholder="输入期望回收价格"/>
				  	
				 
			  </van-tab>
			  <van-tab title="二手设备">
				  <van-checkbox-group :value="type" @change="chooseType">
				    <van-checkbox name="a">种类4</van-checkbox>
				    <van-checkbox name="b">种类5</van-checkbox>
				    <van-checkbox name="v">种类6</van-checkbox>
				  </van-checkbox-group>
				  
					<van-field label="预计重量(KG)" :value="100" placeholder="输入重量"/>
					<van-field label="期望价格(元)" :value="100" placeholder="输入期望回收价格"/>
			  </van-tab>
			</van-tabs>
			
			
		</popup-layer>
		<view class="detailWrap">
			<van-field label="公司名称" :value="userInfo.companyName" placeholder="输入自己公司名称"/>
			<van-field label="联系人" :value="userInfo.contact" placeholder="输入联系人"/>
			<van-field label="联系地址" :value="userInfo.address" placeholder="输入地址"/>
			<van-field label="联系电话" :value="userInfo.tel" placeholder="输入联系电话"/>
			<!-- <van-field label="收处时间" :value="handleTime" placeholder="预约时间"/> -->
			<view class="detailBox">
				<view class="tit">回收类目</view>
				<view class="detailItem" v-for="item in detailItems" :key='item.dangerId'>
					<text>{{item.name}}</text>
					<text>{{item.num}}kg</text>
					<text>{{item.price}}¥</text>
					<image @click="remove(item)" src="../../static/images/delete.png" mode=""></image>
				</view>
				<view class="detailItem">
					<text>回收总价:{{handlePrice}}¥</text>
					<image @click="add" src="../../static/images/add.png" mode=""></image>
				</view>
			</view>
			
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					预约收处时间
				</view>
				<view class="uni-list-cell-db">
					<picker mode="date" :value="date" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
			</view>
			
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					上传图片
				</view>
				<view class="uni-list-cell-db">
					<uploadImg
					:width="300"
					:height="200"
					bgsrc="../../static/img/upload.png"
					@chooseimg="handleChooseImg"></uploadImg>
				</view>
			</view>
			
			<van-field label="备注" :value="orderNote" placeholder="输入备注信息"/>
			 
		</view>
		<view class="footer">
			<view class="confirmBtn" hover-class="opacity" @click="comfirm">提交</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date:'2020-12-01',
				userInfo:{
					companyName:'自己公司名称',
					contact:'张三',
					address:'合肥市蜀山区习友路111号',
					tel:'1872221112',
				},
				detailItems:[
					{
						dangerId:1,
						dangerUploadId:2,
						name:'废铁废铜',
						num:100,
						price:100
					},
					{
						dangerId:1,
						dangerUploadId:2,
						name:'二手机器回收',
						num:100,
						price:100
					},
				],
				weight:"1",
				type:['a'],
				orderNote:'备注信息',
				handleTime:''
			}
		},
		onShow() {
			let vm = this
			// uni.getStorage({
			// 	key:'userInfo',
			// 	success(data) {
			// 		vm.userInfo = data.data
			// 	}
			// })
		},
		computed:{
			handlePrice(){
				let total = 0
				 this.detailItems.forEach(item => {
					 total += item.price
				})
				return total
			}
		},
		methods: {
			handleChooseImg(e){
				console.log('imageSrc:',e);
			},
			bindDateChange: function(e) {
			            this.date = e.target.value
			        },
			remove(item){
				console.log('删除废品,dangerId为',item.dangerId)
			},
			add(){
				console.log('添加废品')
				this.$refs.popupRef.show()
			},
			changeWeight(e){
				this.weight = e.detail
			},
			chooseType(e){
				console.log(e)
				this.type = e.detail
			},
			comfirm(){
				uni.showModal({
					title:'提示',
					content:'是否发布订单',
					success() {
						uni.showToast({
							title:'发布成功'
						})
						setTimeout(()=>{
							uni.navigateTo({
								url:'../orders/orders'
							})
						},1500)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.footer{
	width: 100%;
	padding: 0 40rpx;
	position: absolute;
	bottom: 0;
	height: 120rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: none;
	background: #fff;
	.confirmBtn{
		border-radius: 80rpx;
		width: 96%;
		margin: 0 auto;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #FFFFFF;
		background: $uni-main-theme-color;
	}
}
.detailWrap{
	position: absolute;
	width: 100%;
	bottom: 120rpx;
	padding-top: 40rpx;
	background: #fff;
	border-top-left-radius: 10rpx;
	border-top-right-radius: 10rpx;
}
.detailBox{
	margin: 0 20rpx;
    background-color: #eef5f5;
    border-radius: 20rpx;
	.tit{
    height: 60rpx;
    line-height: 60rpx;
    color: #3bbdc5;
    padding: 0 20rpx;
    background: #b2e5ea;
    border-top-right-radius: 10rpx;
    border-top-left-radius: 10rpx;
	}
	.detailItem{
		margin: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
		line-height: 80rpx;
		image{
			width: 40rpx;
			height: 40rpx;
		}
		text{
			min-width: 150rpx;
		}
	}
}
.uni-list-cell{
	display: flex;
	align-items: center;
	min-height: 80rpx;
	line-height: 80rpx;
	padding: 0 30rpx;
	
	.uni-list-cell-left{
		min-width: 90px;
	}
}
van-checkbox-group{
	padding: 30rpx;
	display: flex;
	flex-wrap: wrap;
	height: 40vh;
	van-checkbox{
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}
}

</style>
